<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../css/oksub.css">
	<script type="text/javascript" src="../lib/loading/okLoading.js"></script>
	<style type="text/css">
	.layui-form-label{
	    width:auto;
	}	
	
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
	<div class="layui-form-item">
			<div class="layui-inline">
					<label class="layui-form-label">员工</label>
					<div class="layui-input-inline">
						<select  id="UserId" 	lay-filter="UserId"> </select></div>
				</div>			
		
			
			<div class="layui-input-inline" style="width:300px">
				  <input type="radio" name="worktype" lay-filter="worktype" value="1" title="上班打卡" checked >
                  <input type="radio" name="worktype" lay-filter="worktype" value="2" title="下班打卡" >
			</div>
				
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit="" lay-filter="search">
							<i class="layui-icon">&#xe617;</i>
						</button>
					</div>
				</div>	
			</div>	
	</form>
	 <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../lib/layui/layui.js"></script>
<script src="../js/okform.js"></script>
<script>
    var timestamp = "";    
    var worktype = "1";    
	layui.use(["element", "form","jquery","table", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let table = layui.table;
		let okMock = layui.okMock;
		let $ = layui.jquery;
		
		okLoading.close();	
		okUtils.ajax("UserServlet?method=getUserSelect", "get", null, true).done(function (response) {
			   var data =response.data;			 	
			  var txtconent = "<option value=''>请选择</option>";
			  for(var i = 0; i < data.length; i ++){
				  txtconent = txtconent + "<option value='"+data[i].UserId+"'>"+data[i].Account + " "+data[i].RealName+"</option>"
			  }
			  $("#UserId").html(txtconent);
			  form.render();
			}).fail(function (error) {
				console.log(error)
		});
		
		var  searchcondition =JSON.stringify({ TIMESTAMP :timestamp});
		let stable = table.render({
			elem: '#tableId',
			url: "../AttendancdServlet?method=getAttendancdDay",	
			toolbar: true,
			defaultToolbar: false,
			size: "sm",
			page:false,
			limit:100,				
			where: {UserId: 1},
			cols: [[			
			    {title: "XUHAO", type :"numbers", width: 160},			
				{field: "Account", title: "姓名", width: 80},
				{field: "RealName", title: "姓名", width: 80},
				{field: "AttendancdDate", title: "工作日期", width: 100},
				{field: "OnTime", title: "上班时间", width: 100},
				{field: "OffTime", title: "下班时间", width: 100},
				{field: "OTTime", title: "加班时间", width: 100},
				{title: "详细", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
			]],			
			done: function (res, curr, count) {
				console.info(res, curr, count);
			}
		});
		form.on('radio(worktype)', function(data){
		    worktype = data.value;		  
		})
		form.on('select(UserId)', function(data){
		    var  UserId= data.value;
		    stable.reload({
				where: {UserId: UserId},
				page: {curr: 1}
			});
		})
		form.on("submit(search)", function (data) {
		  
		      var UserId	 = $("#UserId").val();
		      if(!UserId){
		    	  okLayer.greenTickMsg("请选择打卡人员");
		    	  return false;
		      }
		      okUtils.ajax("AttendancdServlet?method=save", "get", {UserId: UserId,WORK_TYPE: worktype}, true).done(function (response) {	
		    	  okLayer.greenTickMsg("打卡成功");
		    	  stable.reload({
						where: {UserId: UserId},
						page: {curr: 1}
					});
		        
		           
				}).fail(function (error) {
					console.log(error);
				    cardnum = "";
				});
			
		      return false;
		});
	
	
	});
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="详细" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>	
</script>

</body>
</html>
